<template>
  <view class="index" >
    
    <!-- 获取当前地址 -->
    <view class="model">
      <u-button class="m-30" size="medium" type="success" @click="getCurrentAddress">获取当前地址</u-button>
    </view>

    <!-- 搜索地址 -->
    <view class="model">
      <input type="text" v-model="keyword" class="input" placeholder="输入关键字再搜索，例如酒店、广场">
      <u-button class="m-30" size="medium" type="success"  @click="searchAddress">搜索地址</u-button>
    </view>

    <!-- 地址名称转坐标 -->
    <view class="model" >
      <input type="text" v-model="addreessText" class="input" placeholder="北京市海淀区彩和坊路海淀西大街74号">
      <u-button class="m-30" size="medium" type="success"  @click="addressTextToLocation">地址转坐标</u-button>

      
      <map  style="width: 100%; height: 200px;" 
            :latitude="poi.latitude" :longitude="poi.longitude" :markers="covers"
       >
      </map>
      <!--地址描述经纬度展示-->
      <view>地址纬度：{{poi.latitude}}</view>
      <view>地址经度：{{poi.longitude}}</view>
    </view>


    
  </view>
</template>

<script>
  let QQMapWX = require('../../utils/map/qqmap-wx-jssdk.js');
	let qqmapsdk;
	export default {
    components: {
    },
		data() {
			return {
        addreessText:"广州市番禺区市桥",
        // !
        poi:{
          latitude: 39.909,
          longitude: 116.39742,
        },
        // 标志点
        covers: [{
            title:"title",
            latitude: 39.909,
            longitude: 116.39742,
            iconPath: '/static/images/dingwei.png'
        }]


			}
		},
		onLoad() {
      qqmapsdk = new QQMapWX({
				key: ""//腾讯地图key值
			});
    },
		methods: {
      // 获取当前位置信息
      getCurrentAddress() {
          const _this = this;
          uni.getLocation({
            type: 'wgs84',
            success(res) {
              console.log('这是uniApi获取的当前经纬度信息：');
              console.log(res);
              //根据坐标获取当前位置名称，显示在顶部:腾讯地图逆地址解析,前面已引入SDK
              qqmapsdk.reverseGeocoder({
                location: {
                  // 给腾讯地图传参一个经纬度
                  latitude: res.latitude,
                  longitude: res.longitude
                },
                success: function(addressRes) {
                  console.log('这是腾讯地图的根据传参的经纬度给出的位置信息：');
                  console.log(addressRes);
                }
              })
            },
            fail: function(err) {
              //! 说明用户拒绝了首次的获取地理位置
              uni.showToast({
                title: '获取失败',
                duration: 2000,
                icon:"none"
              });
            }
          })
      },
      // 根据关键字搜索地图地方
      searchAddress(){
          // 地点搜索，具体api看官方文档，https://lbs.qq.com/miniProgram/jsSdk/jsSdkGuide/methodSearch
          qqmapsdk.search({
                keyword: this.keyword,
                page_size:20,
                page_index:1,
                success: function (res) {
                    console.log(res);
                },
                fail: function (res) {
                    // console.log(res);
                },
                complete: function (res) {
                    // console.log(res);
                }
          })
      },
      // 地址解析成坐标
      addressTextToLocation() {
        var _this = this;
        //调用地址解析接口
        qqmapsdk.geocoder({
          //获取表单传入地址
          address: this.addreessText, //地址参数，例：固定地址，address: '北京市海淀区彩和坊路海淀西大街74号'
          success: function(res) {//成功后的回调
            console.log('这是地址转坐标的信息：');
            console.log(res);
            var res = res.result;
            var latitude = res.location.lat;
            var longitude = res.location.lng;
            //根据地址解析在地图上标记解析地址位置
              _this.poi =  { //根据自己data数据设置相应的地图中心坐标变量名称
                latitude: latitude,
                longitude: longitude
              }
              _this.covers = [{
                title:"定位地址",
                latitude:latitude,
                longitude:longitude,
                iconPath: '/static/images/dingwei.png'
              }]
          },
          fail: function(error) {
            console.error(error);
          },
        })
      }



    }
    
	}
</script>

<style lang="scss" scoped>
.model {
  border: 1px solid #000;
  margin-bottom: 30rpx;
}
.input{
  border: 1px solid red;
  width: 80%;
  margin-top: 30rpx;
  margin-left: 30rpx;
}
.m-30{
  margin: 30rpx;
}
</style>
